<template>
    <view class="swiper-box">
        <swiper class="swiper" @change="changeSwipe" :autoplay="autoplay" circular :interval="interval" :duration="duration" :next-margin="nextMargin">
            <swiper-item  v-for="i,k in banner" :key="k" class="swiper-item" :class="[k === current ? 'active-item' : '']">
                <image mode="center" class="swipe-image" :src="i.image"></image>
            </swiper-item>
        </swiper>
    </view>
</template>

<script>
    export default {
        name: "banner-gradual",
        data(){
            return {
                banner:[
                    {
                        image:"/static/demo.jpg"
                    },
                    {
                        image:"/static/demo.jpg"
                    },
                    {
                        image:"/static/demo.jpg"
                    }
                ],
                autoplay: false,
                interval: 2000,
                duration: 500,
                nextMargin: '100px',
                current:0
            }
        },
        methods: {
            changeSwipe(c,i){
                this.current = c.detail.current;
            }
        }
    }
</script>

<style lang="scss">
.swiper-box {
    height:400rpx;
    position: relative;
    z-index: 99;
    swiper {
        width: 100%;
        height: 400rpx;
    }
}
.swiper-item {
    box-sizing:border-box;
    padding: 32rpx 24rpx;
    .swipe-image {
        height: 336rpx;
        border-radius: 10rpx;
    }
}
.active-item {
    padding: 0;
    border-radius: 10rpx;
    .swipe-image {
        width: 560rpx;
        height: 400rpx;
    }
}
</style>